<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>南京大学职业咨询室预约平台</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/i/ico_128X128.ico') }}">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="{{ url_for('static', filename='assets/i/app-icon72x72@2x.png') }}">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/amazeui.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/amazeui.datetimepicker.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/app.css', v='1.4') }}">
    <style>
       .content input[type='text']{
            font-size:14px;
        }
    </style>
    <script src="{{ url_for('static', filename='assets/js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/js/amazeui.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='assets/js/amazeui.datetimepicker.min.js') }}"></script>
</head>

<body>
<div class="admin-header">
    <!--<div class="header-back" onclick="history.back()">返回</div>-->
    <div class="header-title">预约记录</div>
</div>
<div class="content">
    <div class="alert alert-warning">
        {% with messages = get_flashed_messages() %}
          {% if messages %}
            <ul class=flashes>
            {% for message in messages %}
            <div class="am-alert am-alert-secondary" data-am-alert>
              <button type="button" class="am-close">&times;</button>
              <div style="text-align: center;">{{ message }}</div>
            </div>
            {% endfor %}
            </ul>
          {% endif %}
        {% endwith %}
    </div>
    <br>
    <br>
    <form class="am-form am-form-inline" role="form" name="njusub" method="post">
        {{ form.csrf_token }}
    </form>

    <div class="am-form-group am-cf">
        <button type="submit" id="id_show_records" value="显示记录" class="am-btn am-btn-primary" onclick="show_records()">显示记录</button>
        <input type="text" style="margin: 10px auto;width:80%;" value="" placeholder="输入显示的起始日期" id="datetimepicker_begin" class="am-form-field">
        <input type="text" style="margin: 10px auto;width:80%;" value="" placeholder="输入显示的终止日期" id="datetimepicker_end" class="am-form-field">
    </div>

    <div class="am-form-group am-cf">
        <button type="submit" id="id_exports_all_records" value="导出所有" class="am-btn am-btn-primary" onclick="exports_all_records()">导出所有</button>        
    </div>

    <div class="am-form-group am-cf">
        <button type="text" id="id_export_records" value="按月导出" class="am-btn am-btn-primary am-btn-sm" onclick="export_records()"><i class="am-icon-cloud-download"></i>按月导出</button>
        <input id="in_year_num" style="margin: 10px auto;width:80%;" type="text" value="" class="am-form-field" placeholder="输入导出记录年份，如：2016">
        <input id="in_week_num" style="margin: 10px auto;width:80%;" type="text" value="" class="am-form-field" placeholder="输入导出记录月份(1~12中的某个数字)">
    </div>

    <div class="am-cf">
        <button type="text" id="back_" value="返回" onclick="javascript:window.location.href='./admin_center';" class="am-btn am-btn-default">返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回</button>
    </div>
</div>

<script type="text/javascript">
    // 设置咨询时间选项和内容选项
    $("#datetimepicker_begin").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: 'month',
        autoclose:true
    });

    $("#datetimepicker_end").datetimepicker({
        format: 'yyyy-mm-dd',
        minView: 'month',
        autoclose:true
    });

    function show_records()
    {
        if ($("#datetimepicker_begin").val()=="")
        {
            alert("请选择要显示预约记录的起始日期");
            return false;
        }

        if ($("#datetimepicker_end").val()=="")
        {
            alert("请选择要显示预约记录的终止日期");
            return false;
        }

        document.njusub.action="/admin_get_records?begindate="+$("#datetimepicker_begin").val()+"&enddate="+$("#datetimepicker_end").val();
        document.njusub.method="post";
        document.njusub.submit();
    }

    function exports_all_records()
    {
        document.njusub.action="/export_all_records";
        document.njusub.method="post";
        document.njusub.submit();
    }

    function export_records()
    {
        if ($("#in_year_num").val()=="")
        {
            alert("请输入导出记录的年份");
            return false;
        }

        if ($("#in_week_num").val()=="")
        {
            alert("请输入导出记录的月份");
            return false;
        }

        document.njusub.action="/export_records?yearnum="+$("#in_year_num").val()+"&weeknum="+$("#in_week_num").val();
        document.njusub.method="post";
        document.njusub.submit();
    }
</script>
</body>

</html>
